<template>
    <div>

      <Row>
        <i-col span="24" :class-name="this.$yMobile()?'y_query_right':'y_query_left'">
          <Cascader :data="categoryList" @on-change="classificationChange"  change-on-select class="y_condition"
                    clearable placeholder="请选择产品分类" style="text-align: left; max-width: 200px;"></Cascader>
          <Input placeholder="请输入产品编号" v-model="param.productCode" class="y_condition" clearable></Input>
          <Button type="primary" icon="md-search" class="y_condition" @click="webList">查询</Button>
        </i-col>

      </Row>


      <Row>
        <div class="tip_div"  v-show="colorList.length === 0">
          <strong>操作提示 :  </strong>
          <br><br>
          <p>1. 排查哪些产品的色卡没有库存</p>
        </div>
      </Row>

      <!--表格和分页-->
      <Table stripe border class="base_table"
             :columns="tableTitles" :data="colorList"
             no-data-text="暂无数据" stripe></Table>

      <div style="float: right;">
        <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
              @on-page-size-change="sizeChange" :page-size-opts="[40,60,80,120]"
              show-sizer show-elevator />
      </div>

      <!--新产品/编辑产品 弹出框-->
      <Modal
        v-model="statusAddEdit.modalModify.isShow"
        title=""
        :mask-closable="false"
        :styles="{top: '20px',bottom:'20px',width:'80%'}">
        <div slot="footer">
        </div>
        <a-productAddEdit ref="AProductAddEdit"></a-productAddEdit>
      </Modal>

    </div>
</template>

<!--javascript 代码-->
<script>
  import tiyData from "./js/stockEmpty/stockEmpty_data";
  import {webList,init} from "./js/stockEmpty/stockEmpty_fun";
  import AProductAddEdit from "../product/ProductAddEdit.vue";
  import tiyAddEditData from "./js/list/add_edit_data";
  import { modifyProduct} from  "./js/list/add_edit_fun"
  import {getProductCommonData, createCategoryList} from "../js/commonUtils"

  export default {
    data() {
      return {
        page: tiyData.tPage,
        colorList: tiyData.tData.colorList,
        status: tiyData.tStatus,
        tableTitles:tiyData.listTableTitles(this),
        param: tiyData.tParam,
        yunPath: this.$store.getters.imgPrefix,
        statusAddEdit:tiyAddEditData.tStatus,
          categoryList:tiyData.tData.categoryList,//分类控件所需要的数据
      }
    },
    computed : {

    },
    methods: {
      webList(){
        tiyData.tPage.currentPage = 1;
        webList(this, tiyData);
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
      classificationChange(value, selectedData){
        if ( 0 < selectedData.length) {
          tiyData.tParam.selectedClassification = selectedData[selectedData.length - 1].value;
          tiyData.tParam.classificationLevel = selectedData[selectedData.length - 1].level;
        } else {
          tiyData.tParam.selectedClassification = '';
          tiyData.tParam.classificationLevel = 0;
        }
      },
      editItem(index){
        modifyProduct(this,tiyAddEditData,tiyData.tData.colorList[index].productId, true);
      },
    },
    components: {
      AProductAddEdit
    },
    created(){
      init(this,tiyData);
      // webList(this,tiyData);
      let types = [];
      types.push(3); //列表只查询分类
      getProductCommonData(this, tiyData.tData.categoryList, types, false, createCategoryList);
    }
  }
</script>

<!--css样式-->
<style lang="less" scoped>
@import  (once,optional)  "../css/base";
  .operation_item {
    text-align: left;
    margin-right: 20px;
  }

  .y_query_left {
    text-align: left;
    display: flex;
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    justify-items: left;
    justify-content:flex-start;
  }
</style>
